<template>
  <form>
    <p>
      视频标题
      <input
        class="ipt"
        type="text"
        placeholder="输入音频标题名称(建议填写字数4-15)"
        v-model.trim="title"
      />
    </p>
    <p>
      关联老师
      <select v-model="teacher">
        <option value="">选择关联老师</option>
        <option value="0">老王</option>
        <option value="1">张梦龙</option>
        <option value="2">武晓慧</option>
      </select>
    </p>
    <p>
      选择类型分类
      <select v-model="cate">
        <option value="">选择一级分类</option>
        <option value="0">线下</option>
        <option value="1">线上</option>
        <option value="2">其他</option>
      </select>
    </p>
    <p>
      关联校区
      <select v-model="school">
        <option value="">选择校区(非必选)</option>
        <option value="0">黑马程序员</option>
        <option value="1">传智教育</option>
        <option value="2">博学谷</option>
      </select>
    </p>
    <div>
      选择消费模式
      <input type="radio" value="0" name="opt" v-model="moneyMode" />付费
      <p v-show="moneyMode">
        输入购买费用
        <input type="text" value="" v-model.number="moneyCount" />
      </p>
      <input
        type="radio"
        value="1"
        name="opt"
        @click="moneyMode = !moneyMode"
      />免费
    </div>
    <p>
      视频简介
      <input
        class="ipt1"
        type="text"
        placeholder="输入分享描述"
        v-model.trim="des"
      />
    </p>
    <p>
      视频详情
      <textarea
        name=""
        id=""
        cols="60"
        rows="3"
        v-model.trim="videoDetail"
      ></textarea>
    </p>
    <p>
      开售时间 <br />
      <input type="radio" value="0" name="date" />立即开售
      <br />
      <input
        type="radio"
        value="1"
        name="date"
        @click="timeModel = !timeModel"
      />定时开售
      <input
        type="text"
        value="开售时间:2019-09-01 00:00:00 "
        v-show="timeModel"
      /><br />
      <input type="radio" value="2" name="date" />暂不开售
    </p>
    <input type="submit" value="保存" @click="submit" />
  </form>
</template>
<script>
export default {
  name: 'day02-work',
  data() {
    return {
      title: '',
      teacher: '',
      cate: '',
      school: '',
      moneyMode: false,
      moneyCount: '',
      des: '',
      videoDetail: '',
      timeModel: false,
    }
  },
  methods: {
    submit() {
      console.log(
        this.title,
        this.teacher,
        this.cate,
        this.school,
        this.moneyModel,
        this.timeModel,
        this.moneyCount
      )
    },
  },
}
</script>
<style lang="less">
.ipt {
  width: 500px;
  height: 20px;
}
.ipt1 {
  width: 500px;
  height: 20px;
}
.ipt2 {
  width: 500px;
  height: 100px;
}
select {
  width: 500px;
  height: 30px;
}
</style>
